<template>
  <el-dialog v-model="visible" :title="title" width="500">
    <el-form :model="form" ref="formRef" labelWidth="100px">
      <el-form-item
        label="品种编码"
        prop="breedId"
        :rules="[
          {
            required: true,
            message: '请输入品种编码',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          placeholder="请输入品种编码"
          v-model.trim="form.breedId"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="品种名称"
        prop="breedName"
        :rules="[
          {
            required: true,
            message: '请输入品种名称',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          placeholder="请输入品种名称"
          v-model.trim="form.breedName"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="客户积分"
        prop="custPoints"
        :rules="[
          {
            required: true,
            message: '请输入客户积分',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          placeholder="请输入客户积分"
          v-model.number="form.custPoints"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="业务积分"
        prop="salemanPoints"
        :rules="[
          {
            required: true,
            message: '请输入业务积分',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          placeholder="请输入业务积分"
          v-model.number="form.salemanPoints"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api/variety.js";

const props = defineProps({
  typeName: { type: String, default: "新增" },
});
const visible = ref(false);
const formRef = ref();
const form = ref({
  breedId: "",
  breedName: "",
  custPoints: undefined,
  salemanPoints: undefined,
});
const emits = defineEmits(["success", "error"]);

const title = computed(() => {
  return (form.value.id ? "编辑" : "新增") + "品种";
});

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = form.value.id
        ? await api.update(form.value)
        : await api.create(form.value);
      if (res.data) {
        ElMessage.success(res.msg || `保存成功！`);
        onCancel();
        emits("success");
      } else {
        ElMessage.error(res.msg || `保存失败！`);
        emits("error");
      }
    }
  });
};

const onCancel = () => {
  formRef.value.clearValidate();
  visible.value = false;
};
const openDialog = (row) => {
  visible.value = true;
  form.value = row ? JSON.parse(JSON.stringify(row)) : {};
};

defineExpose({
  openDialog,
});
</script>
